<template>
	<el-container>
		<el-main>
			<div>
				<el-row>
					<el-col :span="24">
						<h2>排队区</h2>
					</el-col>
				</el-row>
				<el-row type="flex">
					<el-col :span="24">
						<el-table :data="paiduitable" style="width: auto;" height="500">
							<el-table-column fixed prop="pid" label="序号" width="300px">
							</el-table-column>
							<el-table-column fixed prop="pname" label="姓名" width="300px">
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<el-row type="flex">
					<el-col :span="12">
						<el-button type="primary" @click="jiaohao">叫号</el-button>
					</el-col>
					<el-col :span="12">
						<el-button type="primary" @click="tiaoguo">跳过</el-button>
					</el-col>
				</el-row>
			</div>
		</el-main>
		<el-main>
			<div>
				<el-row>
					<el-col :span="24">
						<h2>处理区</h2>
					</el-col>
				</el-row>
				<el-row type="flex">
					<el-col :span="24">
						<el-table :data="chulitable" style="width: auto;" height="500">
							<el-table-column fixed prop="pid" label="序号" width="300px">
							</el-table-column>
							<el-table-column fixed prop="pname" label="姓名" width="300px">
							</el-table-column>
							<el-table-column>
								<template slot-scope="scope">
							        <el-button type="primary" @click="chuli">处理</el-button>
							        <el-button type="primary" @click.native.prevent="deleteRow(scope.$index, chulitable)">完成</el-button>
							    </template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</div>
		</el-main>>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				paiduitable: [],
				chulitable: []
			}
		},
		mounted: function() {
			//将json数据全部读取进来
			this.$axios.get('http://localhost:8080/PaiDui.json').then((result) => {
				this.paiduitable = result.data; //写法固定
			}).catch((err) => {
				console.log(err);
			})
		},
		methods: {
			jiaohao(event) {
				this.chulitable.push(this.paiduitable.shift());
				//将排队区第一号放到处理区末尾
			},
			tiaoguo(event) {
				this.paiduitable.push(this.paiduitable.shift());
				//把没按时来的人放到排队的末尾
			},
			chuli(event) {
				
			},
			deleteRow(index, rows) {
			   console.log(index);
			   rows.splice(index, 1);
			   //删去表格的一行，双向绑定，只需改变表格，数据就自动改变了。
		    }
		}
	}
</script>

<style>
</style>
